<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="app">

   </div>
</body>
<script>
    //声明一个全局组件
    Vue.component("Vbtn",{
        data:function () {
            return {
                info:"按钮"
            };
        },
        template:"<button>{{info}}</button>"
    });

    Vue.component("VBtn2",{
        template:"<button><slot></slot></button>"
    });


    //声明一个头部组件
    var Vheader = {
        data:function () {
            return {
                msg:"我是头部组件",
                info:"我是头组件传过来的值"
            };
        },
        props:["headerData"],
        template:"<div><h3>{{msg}}</h3><p>{{headerData}}</p><button @click='handlers'>传值给父组件</button></div>",
        methods:{
            handlers:function () {
                this.$emit("headerClick",this.info);
            }
        }
    };

    //声明一个侧边栏组件
    var Vaside = {
        data:function () {
            return {
                msg:"我是侧边栏组件",
                info:"我是侧边栏组件传过来的值"
            };
        },
        props:["arrayData"],
        template:"<div><h3>{{msg}}</h3><ol><li v-for='value in arrayData'>{{value}}</li></ol><button @click='handlers'>传值给父组件</button></div>",
        methods:{
            handlers:function () {
                this.$emit("asideClick",this.info);
            }
        }
    };

    //声明一个内容组件
    var Vcontent = {
        data:function () {
            return {
                msg:"我是内容组件",
                info:"我是内容组件传过来的值"
            };
        },
        props:["obj"],
        template:"<div><h3>{{msg}}</h3><ul><li v-for='(value,prop) in obj'>{{prop}}:{{value}}</li></ul><button @click='handlers'>传值给父组件</button></div>",
        methods:{
            handlers:function () {
                this.$emit("contentClick",this.info);
            }
        }
    };

    //父组件传值给子组件
    //1.在父组件中绑定自定义属性
    //2.在子组件中使用props接收父组件传过来的内容
    //3.可以在子组件的任意地方使用

    //子组件传值给父组件
    //1.在父组件中绑定自定义的事件
    //2.在子组件中触发原生事件，在函数中使用$emit触发自定义的事件

    var app = new Vue({
        el:"#app",
        data:function () {
            return {
                msg:"我是父组件传过来的值",
                arrays:["A","B","C"],
                obj:{
                    name:"张三",
                    sex:"男",
                    age:12
                },
                value:"",
                asideValue:"",
                contentValue:""
            };
        },
        methods:{
            headerClick:function (value) {
                this.value = value;
            },
            asideClick:function (value) {
                this.asideValue = value;
            },
            contentClick:function (value) {
                this.contentValue = value;
            }
        },
        //在父组件中挂子组件
        components:{
            Vheader:Vheader,
            Vaside:Vaside,
            Vcontent:Vcontent
        },
        //使用子组件
        template:"<div>" +
        "<Vheader :headerData='msg' @headerClick='headerClick'></Vheader>" +
        "<div>" +
        "<Vaside :arrayData='arrays' @asideClick='asideClick'></Vaside>" +
        "<Vcontent :obj='obj' @contentClick='contentClick'></Vcontent>" +
        "<Vbtn></Vbtn>" +
        "<VBtn2>按钮</VBtn2>" +
        "</div>" +
        "<p>{{value}}</p>" +
        "<p>{{asideValue}}</p>" +
        "<p>{{contentValue}}</p>" +
        "</div>"
    });


</script>
</html>